<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>老师连接客户端</title>
</head>
<body>
<div>
    <button id="denglu">登录</button>
    <button id="shangke">上课</button>
    <button id="xiake">下课</button>
    <button id="xiaohonghua">小红花</button>
    <button id="fankui">教学反馈</button>
    <button id="cfankui">c教学反馈</button>
    <button id="xuanzeti">选择题</button>
    <button id="cxuanzeti">关闭选择</button>
    <button id="daojishi">倒计时</button>
    <button id="panduan">判断</button>
    <button id="cpanduan">结束判断</button>
    <button id="duoxuan">多选</button>
    <button id="cduoxuan">结束多选</button>
    <button id="choosestudent">随机选人</button>
    <button id="qiangda">抢答</button>
    <button id="qiangdaRes">发布抢答结果</button>

</div>
    <div style="height: 100px; width: 100%">
        <p>接收消息窗口</p>
        <textarea id="receive" rows="5" cols="100"></textarea>
    </div>
<br/><br/><br/>
    <div style="height: 100px; width: 100%">
        <p>发送消息窗口</p>
        <textarea id="message" rows="5" cols="100"></textarea>
    </div>
<br/>
<p>
    <button id="sendMessage">发送</button>
    <button id="closeConnect">断开连接</button>

</p>
</body>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    console.log($("#message"))
    // 方式1 http://39.101.165.76:8085/
    $(function(){
        var reconnect;
        var isConnect = false;
        var ws = new WebSocket("ws://127.0.0.1:8050/websocket");
        //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
        ws.onopen = function(){
            //当WebSocket创建成功时，触发onopen事件
            console.log("open");
            connect()
        }
        ws.readyState
        var connect = function () {
            var data = {
                "type":"101",
                "body":{
                    "userId":"2"
                }
            }
            ws.send(JSON.stringify(data)); //将消息发送到服务端
        }

        ws.onmessage = function(e){
            //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
            console.log(e.data);
            let message = JSON.parse(e.data);
            console.log(message,'====================');
            if (message.type == 101) {
                setInterval(function () {
                    ws.send('{"type":"100"}')
                }, 5000)
            }
            if (message.type !== 100) $('#receive').val($('#receive').val() + "\r\n" + e.data)
        }
        ws.onclose = function(e){
            //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
            console.log("close");
            isConnect = false;
            reconnect = setInterval(function () {
                console.log("开始重新连接...")
                if (isConnect) {
                    reconnect.clear()
                }
            }, 5000);
        }
        ws.onerror = function(e){
            //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
            console.log(e);
        }

        $('#sendMessage').click(function () {
            var text = $('#message').val();
            console.log('发送消息: ' + text)
            var data = {
                "type":"101",
                "body":{
                    "userId":"2"
                },
                "message": text
            }
            ws.send(JSON.stringify(data))
            $('#message').val('');
        })

        $('#closeConnect').click(function () {
            ws.close();
        });






        $('#denglu').click(function () {
            var text = ' {\n' +
                '   "type": "101",\n' +
                '   "message": "登录",\n' +
                '   "body": {\n' +
                '        "token": "e....",\n' +
                '        "deviceCode": ""\n' +
                '    }\n' +
                '}   '
            console.log('发送消息: ' + text)
            ws.send(text)
        })
        $('#shangke').click(function () {
            var text = ' {\n' +
                '   "type": "201",\n' +
                '   "message": "开始上课",\n' +
                '   "body": {\n' +
                '       "classId": "1000038"\n' +
                '   }\n' +
                '} '
            console.log('发送消息: ' + text)
            ws.send(text)
        })
        $('#xiake').click(function () {
            var text = ' {\n' +
                '   "type": "202",\n' +
                '   "message": "结束上课",\n' +
                '   "body": {\n' +
                '       "classId": "1000038"\n' +
                '   }\n' +
                '} '
            console.log('发送消息: ' + text)
            ws.send(text)
        })
        $('#xiaohonghua').click(function () {
            var text = '  {\n' +
                '    "type": "401", \n' +
                '    "message": "小红花",\n' +
                '    "body": [\n' +
                '        {\n' +
                '        "userId": "1",\n' +
                '        "name": "姓名",\n' +
                '        "headPicture": "https://www.baidu.com/1.jpg"\n' +
                '        } \n' +
                '    ]\n' +
                '} '
            console.log('发送消息: ' + text)
            ws.send(text)
        })
        $('#fankui').click(function () {
            var text = ' {\n' +
                '    "type":"601",\n' +
                '    "message":"教学反馈",\n' +
                '    "body":{\n' +
                '\n' +
                '    }\n' +
                '}   '
            console.log('发送消息: ' + text)
            ws.send(text)
        })

        $('#cfankui').click(function () {
            var text = ' {\n' +
                '    "type":"611",\n' +
                '    "message":"结束教学反馈",\n' +
                '    "body":{\n' +
                '\n' +
                '    }\n' +
                '} '
            console.log('发送消息: ' + text)
            ws.send(text)
        })


        $('#xuanzeti').click(function () {
            var text = ' {\n' +
                '    "type":"502",\n' +
                '    "message":"选择题",\n' +
                '    "body":{\n' +
                '        "type":"1",\n' +
                '        "items":[\n' +
                '            "A",\n' +
                '            "B",\n' +
                '            "C",\n' +
                '            "D"\n' +
                '        ]\n' +
                '    }\n' +
                '}  '
            console.log('发送消息: ' + text)
            ws.send(text)
        })
        $('#cxuanzeti').click(function () {
            var text = ' {\n' +
                '    "type":"512",\n' +
                '    "message":"结束选择题",\n' +
                '    "body":{\n' +
                '        \n' +
                '    }\n' +
                '}  '
            console.log('发送消息: ' + text)
            ws.send(text)
        });
        $('#daojishi').click(function () {
            var text = ' {\n' +
                '    "type":"505",\n' +
                '    "message":"定时器",\n' +
                '    "body":{\n' +
                '        "timestamp": "1620646953000"\n' +
                '    }\n' +
                '} ' ;
            console.log('发送消息: ' + text)
            ws.send(text)
        });

        $('#panduan').click(function () {
            var text = ' {\n' +
                '    "type":"503",\n' +
                '    "message":"判断题",\n' +
                '    "body":{\n' +
                '        "type":"3",\n' +
                '        "items":[\n' +
                '            "1",\n' +
                '            "0"\n' +
                '        ]\n' +
                '    }\n' +
                '} ' ;
            console.log('发送消息: ' + text)
            ws.send(text)
        });

        $('#cpanduan').click(function () {
            var text = ' {\n' +
                '    "type":"513",\n' +
                '    "message":"结束判断题",\n' +
                '    "body":{\n' +
                '\n' +
                '    }\n' +
                '} ' ;
            console.log('发送消息: ' + text)
            ws.send(text)
        });
        $('#duoxuan').click(function () {
            var text = '  {\n' +
                '    "type":"502",\n' +
                '    "message":"选择题",\n' +
                '    "body":{\n' +
                '        "type":"2",\n' +
                '        "items":[\n' +
                '            "A",\n' +
                '            "B",\n' +
                '            "C",\n' +
                '            "D"\n' +
                '        ]\n' +
                '    }\n' +
                '} '
            console.log('发送消息: ' + text)
            ws.send(text)
        })
        $('#cduoxuan').click(function () {
            var text = ' {\n' +
                '    "type":"512",\n' +
                '    "message":"结束选择题",\n' +
                '    "body":{\n' +
                '        \n' +
                '    }\n' +
                '}  '
            console.log('发送消息: ' + text)
            ws.send(text)
        })
        $('#choosestudent').click(function () {
            var text = ' {\n' +
                '    "type":"506",\n' +
                '    "message":"点名",\n' +
                '    "body":{\n' +
                '        "userId":"1000052"\n' +
                '    }\n' +
                '} '
            console.log('发送消息: ' + text)
            ws.send(text)
        })
        $('#qiangda').click(function () {
            var text = ' {\n' +
                '    "type":"507",\n' +
                '    "message":"抢答",\n' +
                '    "body":{\n' +
                '\n' +
                '    }\n' +
                '} '
            console.log('发送消息: ' + text)
            ws.send(text)
        })

        $('#qiangdaRes').click(function () {
            var text = ' {\n' +
                '    "type":"517",\n' +
                '    "message":"抢答结果",\n' +
                '    "body":{\n' +
                '        "userId": "1",\n' +
                '        "realName": "学生姓名",\n' +
                '        "headPicture": "http://www.baidu.com/1.jpg"\n' +
                '    }\n' +
                '} '
            console.log('发送消息: ' + text)
            ws.send(text)
        })





    });
</script>
</html>
